<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--第五行第六行 有用 -->
    <!--兼容ie浏览器最高版本的，也就是edge-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">

</head>
<body>
<!--栅格结构-->

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-3" style="border: 2px solid red;">
                colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6colxs6</div>
            <div class="col-xs-6 col-sm-3" style="border: 2px solid red;">colxs6</div>
            <div class="clearfix visible-xs-block"></div>
            <div class="col-xs-6 col-sm-3" style="border: 2px solid red;">colxs6</div>
            <div class="col-xs-6 col-sm-3" style="border: 2px solid red;">colxs6</div>
        </div>
        <div class="row">
            <div class="col-sm-offset-0 col-sm-3" style="border: 1px solid red;">offset2</div>
            <div class="col-sm-offset-4 col-sm-1" style="border: 1px solid yellow;">offset4</div>
            <div class="col-sm-1" style="border: 1px solid red;">offset2</div>
        </div>

        <hr>
        <div class="row">
            <div class="col-xs-2 col-md-3 col-lg-6" style="border: 1px solid red;">ciacai</div>
            <div class="col-xs-2 col-md-3 col-lg-6" style="border: 1px solid red;">caicai</div>
            <div class="col-xs-2 col-md-3 col-lg-6" style="border: 1px solid red;">cicai</div>
            <div class="col-xs-2 col-md-3 col-lg-6" style="border: 1px solid red;">cicai</div>
            <div class="col-xs-2 col-md-3 col-lg-6" style="border: 1px solid red;">cicai</div>
            <div class="col-xs-2 col-md-3 col-lg-6" style="border: 1px solid red;">cicai</div>
        </div>
        <div class="row">
            <div class="col-lg-6" style="border: 1px solid red;">
                <div class="row">
                    <div class="col-xs-3 col-sm-4" style="border: 1px solid green;">xs3</div>
                    <div class="col-xs-6 col-sm-4" style="border: 1px solid green;">xs6</div>
                    <div class="col-xs-3 col-sm-4" style="border: 1px solid green;">xs3</div>
                </div>
            </div>
            <div class="col-lg-6"style="border: 1px solid green;">collg6</div>

        </div>
        <div class="row">
            <div class="col-md-pull-3 col-md-3" style="border: 1px solid green;">col-md-pull-3 col-md-3</div>
            <div class="col-md-push-4 col-md-6" style="border: 1px solid green;">col-md-pull-3 col-md-6</div>
            <div class="col-md-pull-4 col-md-6" style="border: 1px solid green;">col-md-pull-3 col-md-6</div>
            <div class="col-md-pull-3 col-md-3" style="border: 1px solid green;">col-md-pull-3 col-md-3</div>
        </div>

        <div class="row">
            <div class="col-md-9 col-md-push-3" style="border: 1px solid green;">col-md-9 col-md-pull-3</div>
            <div class="col-md-3 col-md-pull-9" style="border: 1px solid green;">class="col-md-3 col-md-push-9</div>
        </div>
        <div class="row">
            <div class="col-md-9 " style="border: 1px solid green;">col-md-9 </div>
            <div class="col-md-3 " style="border: 1px solid green;">col-md-3 </div>
        </div>

    </div>


<script type="text/javascript" src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>